<template>
	<view class="container p_12 plr_16">
		<view class="fz_18 fb">
			设置登录密码
		</view>
		<view class="fz_12 fc_999 mt_8">
			登录密码为6-20位字母和数字
		</view>
		<view class="mt_32 bob_1 pb_14 boc_grey fx jcb">
			<!-- <input :password="isPwd" placeholder="请输入密码" :type="isPwd?'safe-password':'text'" :value="password" maxlength="20"
				@input="handleInput" > -->
			<u-input placeholder="请输入密码" type="password" :value="password" maxlength="20"
				@change="handleInput" v-if="isPwd"></u-input>
			<u-input placeholder="请输入密码" type="text" :value="password" maxlength="20"
				@change="handleInput" v-else></u-input>
			<view class="btn_wrap">
				<u-icon :name="isPwd?'eye-off':'eye-fill'" @click="handlePwdClick" size="48rpx"
					color="#E7E7E7"></u-icon>
			</view>
		</view>
		<view class="fc_ccc">
			<view class="mt_12 fx aic" :class="checked[0]?'fc_333':''">
				须包含数字、字母中至少2种元素
				<view class="ml_8" v-if="checked[0]">
					<u-icon name="checkbox-mark" color="#E6502C" size="32rpx"></u-icon>
				</view>
			</view>
			<view class="mt_8 fx aic" :class="checked[1]?'fc_333':''">
				密码长度需6-20位
				<view class="ml_8" v-if="checked[1]"><u-icon name="checkbox-mark" color="#E6502C" size="32rpx"></u-icon>
				</view>
			</view>
		</view>
		<button @click="bindPassword" class="mt_64 custom_btn primary w100 lh_44 br_26 fz_16"
			:disabled="disabled">确定</button>
	</view>
</template>

<script>
	import api from "@/service/config/api";
	export default {
		data() {
			return {
				isPwd: true,
				formData: {
					password: ""
				},
				password: '',
				checked: [false, false],
				type: '1',
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
			}
		},

		computed: {
			isVerified() {
				return this.checked.every(item => !!item)
			},
			disabled() {
				return this.checked[0] && this.checked[1] ? false : true
			},
			checkStyle() {
				return (index) => {
					return this.checked[index] ? 'fc_333' : ''
				}
			}
		},
		onLoad(options) {
			this.type = options.type || '1'
		},
		methods: {
			// 设置密码
			bindPassword() {
				console.log(this.password)
				this.$utils.loading()
				api.post("/user/api/customerSet/modifyPassword", {
					phone: this.$store.state.userInfo.phone,
					password: this.password
				}).then(res => {
					if (res && res.code == 0) {
						if (this.type == '1') {
							uni.showModal({
								title: "提示",
								content: "登录密码设置成功，需重新登录！",
								showCancel: false,
								confirmText: "前往登录",
								confirmColor: "#FE5A1C",
								success() {
									uni.reLaunch({
										url: "/pages/account/pages/login"
									})
								}
							})
						} else {
							let userInfo = this.$storage.getItem('basicUnserInfo')
							userInfo.setPassword = true
							this.$store.commit('setUserInfo', userInfo)
							this.$storage.setItem('basicUnserInfo', userInfo)
							this.$utils.showToast('登录密码设置成功', 1500, 1)
						}
					}
				})
			},
			// 密码输入验证
			handleInput(value) {
				console.log(value)
				let newValue = value.replace(/[\u4E00-\u9FA5]/g, '')
				// this.$set("password",newValue)
				// this.password = newValue
				// this.password = newValue
				console.log("新的数据")
				console.log(value)
				console.log("改变的数据")
				console.log(newValue)
				console.log("输入框的数据")
				console.log(this.password)
				// let reg = /^(?![^a-zA-Z]+$)(?!\D+$)/

				setTimeout(() => {
					this.password = value
					let reg1 = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/
					let reg2 = /^[\da-z]+$/i
					this.$set(this.checked, 0, (reg1.test(value) && reg2.test(value)))

					if (value.length >= 6 && value.length <= 20) {
						this.$set(this.checked, 1, true)
					} else {
						this.$set(this.checked, 1, false)
					}
					console.log(this.checked)
					console.log(/^[\da-z]+$/i.test(value))
					console.log(this.password)
				}, 0)
			},
			handlePwdClick() {
				console.log(this.isPwd)
				this.isPwd = !this.isPwd
				console.log("改变type")
				console.log(this.isPwd)

			}
		},
	}
</script>
<style lang="scss">
	@include color_page;
</style>

<style lang="scss">
	.container {
		/deep/.u-input {
			padding: 0 !important;
			border: none !important;
		}
	}
</style>